<template>
  <div>
    御剑乘风来,除魔天地间!===job

    <h1>动态组件</h1>
    <ul>
      <li :class="{ active: subject == 'web' }" @click="subject = 'web'">
        web
      </li>
      <li :class="{ active: subject == 'java' }" @click="subject = 'java'">
        java
      </li>
      <li :class="{ active: subject == 'ui' }" @click="subject = 'ui'">ui</li>
    </ul>
    <hr>
    <component :is="subject" />
  </div>
</template>

<script>
import web from './comp/web.vue'
import java from './comp/java.vue'
import ui from './comp/ui.vue'
export default {
  name: '',
  components: {
    web,
    java,
    ui
  },
  data() {
    return {
      subject: 'web'
    }
  },
  created() {
    console.log(`this=====job`, this)
  }
}
</script>
<style lang="scss" scoped>
ul {
  display: flex;
  li {
    margin: 20px;
    &.active {
      background-color: red;
    }
  }
}
</style>
